<template>
  <div class="shop-manage">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="店铺名称">
        <el-input v-model="formInline.shopName" placeholder="输入店铺名称"></el-input>
      </el-form-item>
      <el-form-item label="用户名称">
        <el-input v-model="formInline.nickName" placeholder="输入用户名称"></el-input>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select v-model="formInline.status" placeholder="审核状态">
          <el-option label="全部" :value="0"></el-option>
          <el-option label="待审核" :value="1"></el-option>
          <el-option label="审核通过" :value="2"></el-option>
          <el-option label="驳回" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="searchShops">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="list"
      v-loading="loading"
      style="width: 100%">
      <el-table-column
        prop="shopId"
        label="店铺ID"
        width="80">
      </el-table-column>
      <el-table-column
        prop="shopName"
        label="店铺名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="nickName"
        label="申请人名称">
      </el-table-column>
      <el-table-column
        prop="bossPhone"
        label="手机号">
      </el-table-column>
      <el-table-column
        prop="amount"
        label="提现金额">
      </el-table-column>
      <el-table-column
        prop="balance"
        label="余额">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="申请时间">
      </el-table-column>
      <el-table-column
        prop="status"
        label="审核状态">
        <template slot-scope="scope">
          <el-tag type="info" effect="dark" v-if="scope.row.status === 1" size="mini">待审核</el-tag>
          <el-tag type="success" effect="dark" v-if="scope.row.status === 2" size="mini">通过</el-tag>
           <el-popover
            v-if="scope.row.status === 3"
            placement="top-start"
            title="驳回理由"
            width="200"
            trigger="hover"
            :content="scope.row.remark">
            <el-tag type="danger" slot="reference">驳回</el-tag>
          </el-popover>
      </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="showAudit(scope.row)" type="text" size="small" v-if="scope.row.status === 1">通过</el-button>
          <el-button @click="showAuditCancel(scope.row)" type="text" size="small" v-if="scope.row.status === 1">驳回</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      background
      layout="prev, pager, next"
      :page-size="payload.pageSize"
      @current-change="onPageChange"
      :total="payload.total">
    </el-pagination>
    <!-- <shop-info :info="currentShopInfo" ref="shopInfo" @onClose="searchShops"/> -->
  </div>
</template>

<script>
// import ShopInfo from '@/components/ShopInfo'
import numeral from 'numeral'
export default {
  name: 'ShopDrawbackManage',
  // components: {ShopInfo},
  data () {
    return {
      loading: true,
      formInline: {
        shopName: '',
        nickName: '',
        status: 0
      },
      payload: {
        current: 1,
        pageSize: 10,
        total: 10
      },
      list: [],
      currentShopInfo: {}
    }
  },
  methods: {
    searchShops () {
      console.log('点击搜索')
      console.log(this.formInline)
      this.payload.current = 1
      this.getShopDrawbackList()
    },
    getShopDrawbackList () {
      this.loading = true
      let query = {
        userId: this.userInfo.id
      }
      let shopName = this.formInline.shopName.trim()
      let nickName = this.formInline.nickName.trim()
      if (shopName) query.shopName = shopName
      if (nickName) query.nickName = nickName
      if (this.formInline.status) query.status = this.formInline.status
      this.$http.post(this.ApiUrls.getWithdrawList, {
        query,
        form: {},
        pagination: {
          current: this.payload.current,
          pageSize: this.payload.pageSize
        }
      }).then(res => {
        console.log('获取数据成功')
        console.log(res)
        if (res.body.code === 200) {
          this.list = res.body.body.map((item) => {
            item.amount = numeral(item.amount * 100 || 0).divide(100).format('0.00')
            item.balance = numeral(item.balance || 0).divide(100).format('0.00')
            return item
          })
          this.payload.total = res.body.pagination.total
        } else {
          this.$message({
            message: '获取数据失败',
            type: 'warning'
          })
        }
      }).catch(err => {
        console.error(err)
      }).finally(() => {
        this.loading = false
      })
    },
    onPageChange (current) {
      this.payload.current = current
      this.getShopList()
    },
    showAudit (rowData) {
      console.log('审核')
      console.log(rowData)
      console.log(this.$refs)
      this.loading = true
      this.currentShopInfo = rowData
      // this.$refs.shopInfo.showShopDetail()
      this.$confirm('此操作将允许该笔提现, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return this.$http.post(`${this.ApiUrls.auditWithdraw}/${rowData.id}/2/${this.userInfo.id}`, {
            form: {
              remark: '通过'
            }
          })
        })
        .then(res => {
          console.log('test res', res)
          if (res && res.body && res.body.code === 200) {
            rowData.status = 2
            this.$message({
              type: 'success',
              message: '成功!'
            })
          } else {
            this.$message.error('操作失败')
          }
          this.loading = false
        })
        .catch((e) => {
          this.loading = false
          console.error(e)
        })
    },
    showAuditCancel (rowData) {
      console.log('驳回')
      console.log(rowData)
      console.log(this.$refs)
      this.currentShopInfo = rowData
      let remark = ''
      this.$prompt('请输入驳回理由', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        remark = value
        return this.$http.post(`${this.ApiUrls.auditWithdraw}/${rowData.id}/3/${this.userInfo.id}`, {
          form: {
            remark: value
          }
        })
      }).then(res => {
        console.log('test res', res)
        if (res && res.body && res.body.code === 200) {
          rowData.status = 3
          rowData.remark = remark
          this.$message({
            type: 'success',
            message: '成功!'
          })
        } else {
          this.$message.error('操作失败')
        }
      }).catch(() => {
      })
    }
  },
  mounted () {
    this.getShopDrawbackList()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.col {
  display: flex;
  span {
    flex-shrink: 0;
    padding-right: 20px;
    line-height: 40px;
  }
}
.pagination {
  padding-top: 30px;
  margin-left: auto;
  display: table;
}
</style>
